{include file="public/head"}
<body>
<style>
    .left-box{
        margin-left: 8.4%;
    }
    .cartTop{
        display: flex;
        align-items: center;
        margin-bottom: 3rem;
    }
    .cartTop .text{
        border: 1px solid;
        color: #777;
        height: 50px;

        min-width: 50px;
        text-align: center;
        border-radius: 50%;
        position: relative;
    }
    .cartTop .text span{
        position: absolute;
        width: 100%;
        white-space: nowrap;
        left: 0;
        height: 2rem;
        line-height: 2rem;
        bottom: -53%;
        font-size: 1.1rem;
    }
    .cartTop .text.active{
        color: #32c5d2;
    }
    .cartTop .line{
        width: 20%;
        height: 3px;
        background: #ccc;
    }
    .cartTop .line.active{
        background: #32c5d2;
    }
    .goodsimg img{
        width: 100%;
    }
    .goodsinfo{
        padding-top: 2%;
    }
    .goodsinfo:hover{
        background: #e0ebef;
    }
    .goodsinfo .name{
        color: #000;
        font-weight: bold;
        font-size: 1.4rem;
    }
    .goodsinfo .num span{
        color: #F05959;
        font-weight: 500;
    }
    .add-cut{
        display: flex;
    }
    .add-cut span{
        width: 3rem;
        display: block;
        border: 1px solid #ccc;
        text-align: center;
        height: 3rem;
        line-height: 3rem;
    }
    .add-cut .goodsnum{
        width: 5rem;
        text-align: right;
        padding-right: 1%;
        border-right: 0;
        border-left: 0;
    }
    .goodsinfo .price{
        text-align: right;
        font-weight: bold;
        font-size: 1.6rem;
        color: #000;
    }
    .allprice{
        padding-right: 11%;
        text-align: right;
    }
    .allprice .text1{
        font-size: 1.6rem;
        color: #000;
        font-weight: bold;
        text-align: right;
        margin-top: 3rem;
    }
    .allprice .text2{
        text-align: right;
        margin-top: 3rem;

    }
    .allprice .text2 span{

        color: #FFF;
        background-color: #32c5d2;
        border-color: #32c5d2;
        text-align: center;
        padding: 5px 10px;
    }
    .allprice .text2 span:hover{
        background-color: #2797a0;
        border-color: #2797a0;
    }
    .card1 .title{
        background: #67809F;
        padding:10px;
        color: #fff;
    }
    .card2{
        margin-top: 5rem;
    }
    .card2 .userinfo{
        border: 1px solid  #bfcad1;
        padding-bottom: 2rem;

    }
    .card2 .title{
        background: #bfcad1;
        padding:10px;
        color: #fff;
    }
    .card1 .userinfo{
        border: 1px solid  #67809F;
        padding-bottom: 2rem;
    }
    .userinfo div p{
        padding:10px;
        margin: 0;
    }
    .goodsmsg{
        padding-top: 8rem;
        display: table;
        width: 100%;
    }
    .goodsmsg table{
        width: 100%;
    }
    .goodsmsg table th{
        border: 1px solid #ccc;
        padding: 10px ;
    }
    .goodsmsg table tr th:first-child{
        text-align: center;
    }
    .goodsmsg table th img{
        width: 50px;
        height: 50px;
    }
    .treatybox{
        display: flex;
        align-items: center;
        margin-top: 3rem;
        font-size: 1.4rem;
        color: #000;
    }
    .treatybox p{
        margin-bottom: 0;
    }
    .treatybox input{
        margin-top: 0;
        margin-right: 10px;
        width: 20px;
        height: 20px;
    }
    .treatybox input:hover{
        transform: rotate(360deg);
        transition: 1s;
    }
    .treatytext{
        margin-top: 1rem;
        min-width: 100%;
        max-width: 100%;
        min-height: 100px;
        max-height: 100px;
        padding: 10px;
    }
    .back,.pay{
        cursor: pointer;
    }
</style>
<div id="wrapper">
    {include file="public/menu"}

    <div id="page-wrapper" class="gray-bg dashbard-1">
        {include file="public/nav"}
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>确认订单</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="{:url('User/Panel')}">主页</a>
                    </li>
                    <li>
                        <a>商城购物</a>
                    </li>
                    <li>
                        <strong>确认订单</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>确认支付</h5>
                        </div>

                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-lg-10 left-box">
                                    <div class="cartTop">
                                        <p class="text active"><span>购物车</span></p>
                                        <p class="line active"></p>
                                        <p class="line active"></p>
                                        <p class="text active "><span>确认订单</span></p>
                                        <p class="line active"></p>
                                        <p class="line"></p>
                                        <p class="text "><span>结账</span></p>
                                    </div>
                                </div>
                                <div class="col-lg-12 card1">
                                    <div class="title">
                                        基本资料
                                    </div>
                                    <div class="userinfo">
                                        <div class="">
                                            <p>订单类别</p>
                                            <input class="form-control" type="text" value="{$type==1?'500配套':'1000配套'}" disabled>
                                        </div>
                                        <div class="">
                                            <p>会员名</p>
                                            <input class="form-control" type="text" value="{$UserInfo.username}" disabled>
                                        </div>
<!--                                        <div class="">-->
<!--                                            <p>加入家族</p>-->
<!--                                            <select class="form-control" name="" id="map">-->
<!--                                                <option value="">请选择</option>-->
<!--                                                <optgroup label="{$UserInfo.recommend_name} {$UserInfo.recommend_num}">-->
<!--                                                   {volist name="family" id="fv"}-->
<!--                                                    <option value="{$fv.id}">{$fv.map_number} {$map_top[$fv['position']]['name']}(P{$fv.position})</option>-->
<!--                                                    {/volist}-->
<!--                                                </optgroup>-->
<!--                                            </select>-->
<!--                                        </div>-->
                                    </div>
                                </div>
<!--                                <div class="col-lg-12 card2">-->
<!--                                    <div class="title">-->
<!--                                        物流-->
<!--                                    </div>-->
<!--                                    <div class="userinfo">-->
<!--                                        <div class="">-->
<!--                                            <p>收件人</p>-->
<!--                                            <input class="form-control" type="text" id="name" placeholder="收件人">-->
<!--                                        </div>-->
<!--                                        <div class="">-->
<!--                                            <p>电话</p>-->
<!--                                            <input class="form-control" type="number" id="phone" placeholder="电话">-->
<!--                                        </div>-->
<!--                                        <div style="display: table;width: 100%;">-->
<!--                                            <p>地址</p>-->
<!--                                            <div>-->
<!--                                                <div class="col-lg-3">-->
<!--                                                    <select class="form-control" name="" id="province">-->
<!--                                                        {volist name="province" id="pv"}-->
<!--                                                        <option value="{$pv.id}">{$pv.name}</option>-->
<!--                                                        {/volist}-->
<!--                                                    </select>-->
<!--                                                </div>-->
<!--                                                <div class="col-lg-3">-->
<!--                                                    <select class="form-control" name="" id="city">-->
<!--                                                        <option value="">请选择</option>-->
<!--                                                        {volist name="city" id="cv"}-->
<!--                                                        <option value="{$cv.id}">{$cv.name}</option>-->
<!--                                                        {/volist}-->
<!--                                                    </select>-->
<!--                                                </div>-->
<!--                                                <div class="col-lg-3">-->
<!--                                                    <select class="form-control" name="" id="area">-->
<!--                                                        <option value="">请选择</option>-->
<!--                                                    </select>-->
<!--                                                </div>-->
<!--                                                <div class="col-lg-3">-->
<!--                                                    <input type="text" class="form-control" id="address" placeholder="详细地址">-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                        </div>-->

<!--                                    </div>-->
<!--                                </div>-->
                                <div class="goodsmsg">
                                    <table>
                                        <tr>
                                            <th class="col-lg-2">#</th>
                                            <th class="col-lg-6">配套名称</th>
                                            <th class="col-lg-2">单价</th>
                                            <th class="col-lg-2">小计</th>
                                        </tr>
<!--                                        {volist name="cart" id="v"}-->
<!--                                        <tr>-->
<!--                                            <th class="col-lg-2"><img src="{$v.goods.logo_url}" alt=""></th>-->
<!--                                            <th class="col-lg-6">{$v.goods.price|floatval}x{$v.num}</th>-->
<!--                                            <th class="col-lg-2">{$v.goods.price|floatval}</th>-->
<!--                                            <th class="col-lg-2">{$v.goods.price*$v.num}</th>-->
<!--                                        </tr>-->
<!--                                        {/volist}-->
                                        <tr>
                                            <th class="col-lg-2"><img src="{$cart.logo_url}" alt=""></th>
                                            <th class="col-lg-6">{$cart.price|floatval}x1</th>
                                            <th class="col-lg-2">{$cart.price|floatval}</th>
                                            <th class="col-lg-2">{$cart.price*1}</th>
                                        </tr>
                                    </table>
                                    <div class="treatybox">
                                        <input type="checkbox" id="agree">
                                        <p class="treaty">条约</p>
                                    </div>
                                    <textarea class="treatytext" disabled readonly>购物条约购物条约购物条约购物条约购物条约购物条约购物条约购物条约购物条约购物条约购物条约购物条约购物条约购物条约购物条约购物条约购物条约购物条约</textarea>
                                </div>
                                <div class="col-lg-12 allprice">
                                    <p class="text1">总金额：{$total}</p>
                                    <p class="text2"><span style="background: #777" class="back">返回</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="pay">确认支付</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        {include file="public/foot"}

    </div>
</div>
</div>
{include file="public/footer"}
<link rel="stylesheet" href="__STATIC__/kuang/utils/swiper/swiper.css">
<script src="__STATIC__/kuang/utils/swiper/swiper.js"></script>
<script>
    $(".treaty").click(function () {
        $('.treatytext').toggle()
    })
    var mySwiper = new Swiper ('.swiper', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        // autoplay:true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })
    $("#map").change(function () {

    })

    $("#city").change(function () {
        var city = $(this).val()
        $("#area").html('')
        $.ajax({
            type:"post",
            dataType:"json",
            data:{city:city,type:'city'},
            url:"{:url('chooseCity')}",
            success:function (data) {
                $("#area").html(data)
            }
        })
    })
    $(".back").click(function () {
        window.location.href = "{:url('cart')}"
    })
    var flag = 1;
    $(".pay").click(function () {
        if (!flag){
            return  false
        }
        if (!$("#agree").prop('checked')){
            layer.msg('请先同意条约');
            return false
        }
        // var map = $("#map").val()
        // var name = $("#name").val()
        // var phone = $("#phone").val()
        // var province = $("#province").val()
        // var city = $("#city").val()
        // var area = $("#area").val()
        // var address = $("#address").val()
        // if (map == ''){
        //     layer.msg('请选择加入的家族');
        //     return false
        // }
        // if (name == '' || phone == '' || province == '' || city == '' || area == '' || address == ''){
        //     layer.msg('请输入收货地址');
        //     return false
        // }
        flag = 0;
        $.ajax({
            type:"post",
            dataType: "json",
            data:{
                // map:map,
                // name:name,
                // phone:phone,
                // province:province,
                // city:city,
                // area:area,
                // address:address,
                // type:"{$type}", //配套类型
                goods_id:"{$cart.id}"
            },
            url:"{:url('CreateOrder')}",
            beforeSend:function () {
                loadingIndex = layer.load(2, { //icon支持传入0-2
                    shade: [0.5, 'gray'], //0.5透明度的灰色背景
                    content: 'Loading...',
                    success: function (layero) {
                        layero.find('.layui-layer-content').css({
                            'padding-top': '39px',
                            'width': '60px'
                        });
                    }
                });
            },
            success:function (data) {
                layer.close(loadingIndex)
                if (data.status == 1){
                    layer.msg(data.message,{time:1500},function () {
                        window.location.href = "{:url('User/Panel')}"
                    })
                }else {
                    layer.msg(data.message);
                    flag = 1
                }
            }
        })
    })
</script>
</body>
</html>
